#{$prefix}-icon-picker {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;

  &_input {
    flex-grow: 1;

    .el-input-group__prepend {
      padding: 0 10px;
    }
  }

  &_panel {
    text-align: left;
    overflow: hidden;
    &_filter {
      margin-right: 15px;
      width: 180px !important;

      .el-input__inner {
        height: 28px;
        line-height: 28px;
      }
    }

    &_item {
      position: relative;
      margin: 5px;
      display: inline-block;
      width: 50px;
      height: 50px;
      text-align: center;
      background-color: #e1e1e1;
      border-radius: 5px;
      box-sizing: border-box;
      cursor: pointer;
      color: $text-color-3;
      transition: all 0.2s ease-in;

      &:hover {
        background-color: $color-warning;
        color: #fff;
        transform: scale(1.1);
      }

      #{$prefix}-icon {
        margin: 12px;
        font-size: 28px;
      }
    }
  }
}
